<template>
  <el-menu
    default-active="2"
    class="el-menu-vertical-demo"
    :collapse="isCollapse"
    @open="handleOpen"
    @close="handleClose"
  >
    <el-menu-item index="1" @click="open1()">
      <el-icon><icon-menu /></el-icon>
      <template #title>个人信息编辑</template>
    </el-menu-item>

    <el-menu-item index="3" @click="open3()">
      <el-icon><files /></el-icon>
      <template #title>工作经历</template>
    </el-menu-item>

    <el-menu-item index="4" @click="open4()">
      <el-icon><list /></el-icon>
      <template #title>项目经历</template>
    </el-menu-item>

    <el-menu-item index="5" @click="open5()">
      <el-icon><flag /></el-icon>
      <template #title>专业技能</template>
    </el-menu-item>

    <el-menu-item index="6" @click="open6()">
      <el-icon><box /></el-icon>
      <template #title>其他说明</template>
    </el-menu-item>

    <el-menu-item index="2" @click="open2()">
      <el-icon><document /></el-icon>
      <template #title>个人信息预览</template>
    </el-menu-item>
  </el-menu>
</template>

<script lang="ts" setup>
import { ref } from "vue";
import {
  Location,
  Document,
  Menu as IconMenu,
  Setting,
  Box,
  Flag,
  List,
  Files,
} from "@element-plus/icons-vue";
import router from "../../router";

const isCollapse = ref(true);
const handleOpen = (key: string, keyPath: string[]) => {
  console.log(key, keyPath);
};
const handleClose = (key: string, keyPath: string[]) => {
  console.log(key, keyPath);
};

const open1 = () => {
  router.push("/home");
};

const open2 = () => {
  router.push("/cv");
};

const open3 = () => {
  router.push("/work");
};

const open4 = () => {
  router.push("/project");
};

const open5 = () => {
  router.push("/profession");
};

const open6 = () => {
  router.push("/other");
};
</script>
<style scoped>
.el-menu-vertical-demo {
  height: 100%;
  /* min-height: 100vh; */
}
</style>

